<script setup lang="ts">
import search from "@/components/search/search.vue";
import goodsSearchList from "@/components/goods/goodsSearchList.vue";
import goodsWaterfallIndex from "@/components/goods/goodsWaterfallIndex.vue";
import { ref } from "vue";
import { onReachBottom } from "@dcloudio/uni-app";
import { apiProductPage } from "@/apis/product";
import { toast } from "@/utils/tools";
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();
const searchParams = ref("");
const pageNum = ref(1);
const pageSize = ref(10);
const pageList = ref([]);
const isMore = ref(false);
const leftList = ref([]);
const rightLists = ref([]);
const searchRef = ref();

const handleSearch = async (val) => {
  //console.log("val: ", val);
  await getProductPage(val);
  if (val) return; // 点击历史记录
  await searchRef.value.getSearchHistoryList();
};

const getProductPage = async (val) => {
  let appUserId = null;
  if (userStore.userInfo === undefined) {
    appUserId = null;
  } else {
    appUserId = userStore.userInfo.id;
  }

  const curVal = val || searchParams.value || "";

  if (curVal === "") {
    return false;
  }

  let res = await apiProductPage({
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    orderField: "default",
    orderType: "desc",
    shopName: curVal,
    appUserId: appUserId,
  });
  if (res.rows.length <= 0) {
    isMore.value = true;
    return false;
  }
  pageNum.value++;
  // pageList.value = res.rows;

  handlePageList(res.rows);
};
const handlePageList = (data: any) => {
  for (let i = 0; i < data.length; i++) {
    data[i].images = data[i].images.split(",");
    data[i].videos = data[i]?.videos.split(",");
    if (i % 2 === 0) {
      leftList.value.push(data[i]);
    } else {
      rightLists.value.push(data[i]);
    }
  }
};
onReachBottom((e: any) => {
  getProductPage();
});
</script>
<template>
  <view class="container">
    <view class="l-card">
      <uv-input
        placeholder="请输入您想要的搜索的奇石/店铺"
        border="none"
        v-model="searchParams"
      >
        <template v-slot:suffix>
          <view class="flex flex-align-center" @click="() => handleSearch()">
            <view class="line margin-right-20"></view>
            <text class="search">搜索</text>
          </view>
        </template>
      </uv-input>
    </view>
    <search ref="searchRef" @search="handleSearch"></search>
    <goodsWaterfallIndex
      :leftList="leftList"
      :rightLists="rightLists"
      :searchParams="searchParams"
      :isMore="isMore"
    />
  </view>
</template>
<style lang="scss">
page {
  background: #f7fbff;
}
</style>
